<template>
    <div>
        <el-card shadow="never" style="border: none;background-color: transparent">
            <div class="main-container">
                <!-- 第一页 -->
                <div style="height: 100%; padding-top: 0.8rem; padding-bottom: 2rem">
                    <div class="title-container">
                        <div class="title-text">

                                        <h1 class="title margin-bottom">Welcome to</h1>
                                        <h1 class="title margin-top">HC Online Judge Space</h1>
                                        <div class="d-text">
                                          <span class="s-text">
                                            HC
                                            OJ是一个专注于为您提供OJ相关服务的平台。无论您需要刷题、比赛、或者为进行相关交流学习,
                                            <br/>
                                            HC Space都能满足您的需求。
                                          </span>
                                        </div>

                                    </div>
                    </div>
                    <!-- 将span标签屏幕居中 -->
                </div>
<!--                <video loop muted autoplay playsinline x5-video-player-type="h5" x-webkit-airplay="true"-->
<!--                webkit-playsinline="true" x5-playsinline="true" preload="none"-->
<!--                       style="width: 100%;height: 100%;object-fit: cover;object-position: center">-->
<!--                    <source src="http://file.frank-share.top/homeVideo.mp4" type="video/mp4">-->
<!--                </video>-->
            </div>
        </el-card>
        <!--          hc1：轮播图-->
        <el-card
                style="width: 70%;margin-left: auto;margin-right: auto;border: none; background-color: transparent"
                shadow="never">
            <el-carousel
                    :interval="interval"
                    :height="srcHight"
                    class="img-carousel"
                    arrow="always"
                    type="card"
                    indicator-position="outside"
            >
                <el-carousel-item
                        v-for="(item, index) in carouselImgList"
                        :key="index"
                >
                    <el-image
                            :src="item.url"
                            fit="scale-down"
                            style="display: flex"
                    >
                        <div
                                slot="error"
                                class="image-slot"
                        >
                            <i class="el-icon-picture-outline"></i>
                        </div>
                    </el-image>
                </el-carousel-item>
            </el-carousel>
        </el-card>

        <!--          hc2:公告-->
        <el-card shadow="hover"
                 style="border: none; width: 100%;margin-left: auto;margin-right: auto;background-color: transparent"
                 class="card-top">
            <el-row :gutter="12">
                <el-col :md="12"
                        :sm="12"
                        :xs="0">
                    <section class="hero" style="width: 80%;float: right">
                        <div class="container">
                            <div class="left-col">
                                <p class="subhead">It's Nitty &amp; Gritty</p>
                                <h1>A OJ Web That Doesn't Stink</h1>

                                <div class="hero-cta">
                                    <span href="#" class="primary-cta">{{ $t('m.Announcement') }}</span>
                                </div>
                            </div>
                            <el-image src="https://assets.codepen.io/2621168/illustration.svg" class="hero-img"
                                      alt="Illustration" lazy></el-image>
                        </div>
                    </section>

                </el-col>
                <el-col :md="12"
                        :sm="12"
                        :xs="24" style="display: flex;justify-content: space-evenly">
                    <Announcements style="width: 60%;margin-top: 3.6rem"></Announcements>
                </el-col>
            </el-row>
        </el-card>

        <!--          hc3：比赛通知-->
        <el-card shadow="hover" class="card-top" style="border: none;background-color: transparent">

            <el-row :gutter="12" style="display: flex;align-items: center">
                <el-col :md="12" :sm="12" :xs="24">
                    <template v-if="contests.length">
                        <el-card shadow="hover"
                                 style="width: 70%;margin-left: auto;margin-right: auto;border: none;background: none">

                            <el-card
                                    v-for="(contest, index) in contests"
                                    :key="index"
                                    class="contest-card"
                                    :class="
                contest.status == 0
                  ? 'contest-card-running'
                  : 'contest-card-schedule'
              "
                            >
                                <div
                                        slot="header"
                                        class="clearfix contest-header"
                                >
                                    <a
                                            class="contest-title"
                                            @click="goContest(contest.id)"
                                    >{{
                                        contest.title
                                        }}</a>
                                    <div class="contest-status">
                                        <el-tag
                                                effect="dark"
                                                size="medium"
                                                :color="CONTEST_STATUS_REVERSE[contest.status]['color']"
                                        >
                                            <i
                                                    class="fa fa-circle"
                                                    aria-hidden="true"
                                            ></i>
                                            {{
                                            $t('m.' + CONTEST_STATUS_REVERSE[contest.status]['name'])
                                            }}
                                        </el-tag>
                                    </div>
                                </div>
                                <div class="contest-type-auth">
                                    <template v-if="contest.type == 0">
                                        <el-button
                                                :type="'primary'"
                                                round
                                                @click="goContestList(contest.type)"
                                                size="mini"
                                                style="margin-right: 10px;"
                                        ><i class="fa fa-trophy"></i>
                                            {{ contest.type | parseContestType }}
                                        </el-button>
                                    </template>
                                    <template v-else>
                                        <el-tooltip
                                                :content="
                      $t('m.Contest_Rank') +
                        '：' +
                        (contest.oiRankScoreType == 'Recent'
                          ? $t(
                              'm.Based_on_The_Recent_Score_Submitted_Of_Each_Problem'
                            )
                          : $t(
                              'm.Based_on_The_Highest_Score_Submitted_For_Each_Problem'
                            ))
                    "
                                                placement="top"
                                        >
                                            <el-button
                                                    :type="'warning'"
                                                    round
                                                    @click="goContestList(contest.type)"
                                                    size="mini"
                                                    style="margin-right: 10px;"
                                            ><i class="fa fa-trophy"></i>
                                                {{ contest.type | parseContestType }}
                                            </el-button>
                                        </el-tooltip>
                                    </template>
                                    <el-tooltip
                                            :content="$t('m.' + CONTEST_TYPE_REVERSE[contest.auth].tips)"
                                            placement="top"
                                            effect="light"
                                    >
                                        <el-tag
                                                :type="CONTEST_TYPE_REVERSE[contest.auth]['color']"
                                                size="medium"
                                                effect="plain"
                                        >
                                            {{ $t('m.' + CONTEST_TYPE_REVERSE[contest.auth]['name']) }}
                                        </el-tag>
                                    </el-tooltip>
                                </div>
                                <ul class="contest-info">
                                    <li>
                                        <el-button
                                                type="info"
                                                plain
                                                round
                                                size="mini"
                                                style="margin-top: 4px;"
                                        ><i class="fa fa-calendar"></i>
                                            {{
                                            contest.startTime | localtime((format = 'MM-DD HH:mm'))
                                            }}
                                        </el-button>
                                    </li>
                                    <li>
                                        <el-button
                                                type="success"
                                                round
                                                plain
                                                size="mini"
                                                style="margin-top: 4px;"
                                        ><i class="fa fa-clock-o"></i>
                                            {{ getDuration(contest.startTime, contest.endTime) }}
                                        </el-button>
                                    </li>
                                    <li>
                                        <el-button
                                                size="mini"
                                                round
                                                plain
                                                v-if="contest.count != null"
                                        >
                                            <i
                                                    class="el-icon-user-solid"
                                                    style="color:rgb(48, 145, 242);"
                                            ></i>x{{ contest.count }}
                                        </el-button>
                                    </li>
                                </ul>
                            </el-card>
                        </el-card>
                    </template>
                </el-col>
                <el-col :md="12" :sm="12 " :xs="0" style="padding: 0px">
                    <div style="text-align: center">
                        <h1 style="font-size: 2.5rem;line-height: 1.3em;margin-top: .2em;text-shadow: 4px 2px 11px black">
                            Recent Contest</h1>
                        <h3 class="subhead">各平台近期比赛一目了然！</h3>
                    </div>

<!--                    <el-image src="https://github.githubassets.com/assets/illu-code-scanning-fc9dfb212aa3.png"-->
<!--                              style="margin-bottom: 1rem"-->
<!--                              alt="Illustration" lazy></el-image>-->
                    <el-image src="http://file.frank-share.top/contests/All.png" style="margin-bottom: 1rem" lazy></el-image>
                </el-col>
            </el-row>
        </el-card>


        <!--          hc4：折线图-->
        <el-card shadow="hover" class="card-top" style="border: none;background-color: transparent">
            <el-row :gutter="12">
                <el-col :md="14"
                        :sm="14"
                        :xs="24" style="display: flex;justify-content: flex-end">
                    <SubmissionStatistic style="width: 100%"></SubmissionStatistic>
                </el-col>
                <el-col :md="10"
                        :sm="10"
                        :xs="0">
                    <section class="hero" style="width: 80%;float: right">
                        <div class="container">
                            <div class="left-col">
                                <div class="hero-cta">
                                            <span href="#" class="primary-cta">{{
                                                $t('m.Statistics_Submissions_In_The_Last_Week')
                                                }}</span>
                                </div>

                            </div>
                            <el-image src="https://github.githubassets.com/assets/footer-mona-d1c861cd8018.png"
                                      alt="Illustration" lazy></el-image>
                        </div>
                    </section>
                </el-col>
            </el-row>
        </el-card>

        <!--          hc5：最新题目-->
        <el-card shadow="hover" class="card-top" style="border: none;background-color: transparent">
            <el-row :gutter="20">
                <el-col :md="12"
                        :sm="24"
                        :xs="24">
                    <el-card style="height: 613px">
                        <div
                                slot="header"
                                class="clearfix"
                                style="color: black;text-align: center;"
                        >
            <span class="panel-title home-title">
              <i class="el-icon-magic-stick"></i> {{
                $t('m.Latest_Problem')
                }}</span>
                        </div>
                        <vxe-table
                                border="inner"
                                highlight-hover-row
                                stripe
                                :loading="loading.recentUpdatedProblemsLoading"
                                auto-resize
                                :data="recentUpdatedProblems"
                                @cell-click="goProblem"
                        >
                            <vxe-table-column
                                    field="problemId"
                                    :title="$t('m.Problem_ID')"
                                    min-width="100"
                                    show-overflow
                                    align="center"
                            >
                            </vxe-table-column>
                            <vxe-table-column
                                    field="title"
                                    :title="$t('m.Title')"
                                    show-overflow
                                    min-width="130"
                                    align="center"
                            >
                            </vxe-table-column>
                            <vxe-table-column
                                    field="gmtModified"
                                    :title="$t('m.Recent_Update')"
                                    show-overflow
                                    min-width="96"
                                    align="center"
                            >
                                <template v-slot="{ row }">
                                    <el-tooltip
                                            :content="row.gmtModified | localtime"
                                            placement="top"
                                    >
                                        <span>{{ row.gmtModified | fromNow }}</span>
                                    </el-tooltip>
                                </template>
                            </vxe-table-column>

                        </vxe-table>
                    </el-card>
                </el-col>
                <el-col :md="12"
                        :sm="24"
                        :xs="24">
                    <el-card style="height: 613px">
                        <div
                                slot="header"
                                class="clearfix"
                                style="color: black;text-align: center;"
                        >
            <span class="panel-title home-title">
              <i class="el-icon-s-data"></i> {{ $t('m.Recent_7_Days_AC_Rank') }}
            </span>
                        </div>
                        <vxe-table
                                border="inner"
                                stripe
                                auto-resize
                                align="center"
                                :data="recentUserACRecord"
                                max-height="500px"
                                :loading="loading.recent7ACRankLoading"
                        >
                            <vxe-table-column
                                    type="seq"
                                    min-width="50"
                            >
                                <template v-slot="{ rowIndex }">
                <span :class="getRankTagClass(rowIndex)">{{ rowIndex + 1 }}
                </span>
                                    <span :class="'cite no' + rowIndex"></span>
                                </template>
                            </vxe-table-column>
                            <vxe-table-column
                                    field="username"
                                    :title="$t('m.Username')"
                                    min-width="200"
                                    align="left"
                            >
                                <template v-slot="{ row }">
                                    <avatar
                                            :username="row.username"
                                            :inline="true"
                                            :size="25"
                                            color="#FFF"
                                            :src="row.avatar"
                                            class="user-avatar"
                                    ></avatar>
                                    <a
                                            @click="goUserHome(row.username, row.uid)"
                                            style="color:#020202;"
                                    >{{ row.username }}</a>
                                    <span
                                            style="margin-left:2px"
                                            v-if="row.titleName"
                                    >
                  <el-tag
                          effect="dark"
                          size="small"
                          :color="row.titleColor"
                  >
                    {{ row.titleName }}
                  </el-tag>
                </span>
                                </template>
                            </vxe-table-column>
                            <vxe-table-column
                                    field="ac"
                                    :title="$t('m.AC')"
                                    min-width="50"
                                    align="left"
                            >
                            </vxe-table-column>
                        </vxe-table>
                    </el-card>
                </el-col>
            </el-row>
        </el-card>



        <!--          hc6：远程测评-->
        <div style="margin-top: 4rem;margin-bottom: 3rem">
            <h1 class="hc-h1"> {{ $t('m.Supported_Remote_Online_Judge') }}</h1>
        </div>

        <el-row :gutter="20">
            <el-col :md="4" :sm="8" :xs="12" v-for="(item, index) in remoteJudgeList" :key="index">
                <el-card shadow="hover"
                         style="background-color: transparent ;display: flex;justify-content: center">
                    <div style="display: flex;justify-content: center">
                        <el-avatar shape="circle" :src="item.logo" :alt="item.name"></el-avatar>
                    </div>
                    <h2><a :href="item.url" target="_blank">{{ item.name }}</a></h2>
                    <div style="display: flex;justify-content: center">
                        <p v-if="item.status"><i class="el-icon-success"
                                                 style="color: green;font-size: 20px"></i></p>
                        <p v-else><i class="el-icon-error" style="color: red;font-size: 20px"></i></p>
                    </div>

                </el-card>
            </el-col>

        </el-row>

    </div>
</template>

<script>
import time from "@/common/time";
import api from "@/common/api";
import {
    CONTEST_STATUS_REVERSE,
    CONTEST_TYPE_REVERSE,
} from "@/common/constants";
import {mapState, mapGetters} from "vuex";
import Avatar from "vue-avatar";
import myMessage from "@/common/message";

const Announcements = () => import("@/components/oj/common/Announcements.vue");
const SubmissionStatistic = () =>
    import("@/components/oj/home/SubmissionStatistic.vue");

export default {
    name: "home",
    components: {
        Announcements,
        SubmissionStatistic,
        Avatar,
    },
    data() {
        return {
            interval: 5000,
            recentUpdatedProblems: [],
            recentUserACRecord: [],
            CONTEST_STATUS_REVERSE: {},
            CONTEST_TYPE_REVERSE: {},
            contests: [],
            loading: {
                recent7ACRankLoading: false,
                recentUpdatedProblemsLoading: false,
                recentContests: false,
            },
            carouselImgList: [
                {
                    url: "http://file.frank-share.top/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240324114915.jpg",
                },
                {
                    url: "http://file.frank-share.top/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240324115204.jpg",
                },
                {
                    url: "http://file.frank-share.top/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240324115208.jpg"
                }
            ],
            srcHight: "339px",
            remoteJudgeList: [
                {
                    url: "http://acm.hdu.edu.cn",
                    name: "HDU",
                    logo: require("@/assets/hdu-logo.png"),
                    status: true,
                },
                {
                    url: "http://poj.org",
                    name: "POJ",
                    logo: require("@/assets/poj-logo.png"),
                    status: true,
                },
                {
                    url: "https://codeforces.com",
                    name: "Codeforces",
                    logo: require("@/assets/codeforces-logo.svg"),
                    status: true,
                },
                {
                    url: "https://codeforces.com/gyms",
                    name: "GYM",
                    logo: require("@/assets/gym-logo.png"),
                    status: true,
                },
                {
                    url: "https://atcoder.jp",
                    name: "AtCoder",
                    logo: require("@/assets/atcoder-logo.png"),
                    status: true,
                },
                {
                    url: "https://www.spoj.com",
                    name: "SPOJ",
                    logo: require("@/assets/spoj-logo.png"),
                    status: true,
                },
            ],
        };
    },
    mounted() {
        let screenWidth = window.screen.width;
        if (screenWidth < 768) {
            this.srcHight = "200px";
        } else {
            this.srcHight = "339px";
        }
        this.CONTEST_STATUS_REVERSE = Object.assign({}, CONTEST_STATUS_REVERSE);
        this.CONTEST_TYPE_REVERSE = Object.assign({}, CONTEST_TYPE_REVERSE);
        this.getHomeCarousel();
        this.getRecentContests();
        this.getRecent7ACRank();
        this.getRecentUpdatedProblemList();
    },
    methods: {
        getHomeCarousel() {
            api.getHomeCarousel().then((res) => {
                if (res.data.data != null && res.data.data.length > 0) {
                    this.carouselImgList = res.data.data;
                }
            });
        },

        getRecentContests() {
            this.loading.recentContests = true;
            api.getRecentContests().then(
                (res) => {
                    this.contests = res.data.data;
                    this.loading.recentContests = false;
                },
                (err) => {
                    this.loading.recentContests = false;
                }
            );
        },
        getRecentUpdatedProblemList() {
            this.loading.recentUpdatedProblemsLoading = true;
            api.getRecentUpdatedProblemList().then(
                (res) => {
                    this.recentUpdatedProblems = res.data.data;
                    this.loading.recentUpdatedProblemsLoading = false;
                },
                (err) => {
                    this.loading.recentUpdatedProblemsLoading = false;
                }
            );
        },
        getRecent7ACRank() {
            this.loading.recent7ACRankLoading = true;
            api.getRecent7ACRank().then(
                (res) => {
                    this.recentUserACRecord = res.data.data;
                    this.loading.recent7ACRankLoading = false;
                },
                (err) => {
                    this.loading.recent7ACRankLoading = false;
                }
            );
        },
        goContest(cid) {
            if (!this.isAuthenticated) {
                myMessage.warning(this.$i18n.t("m.Please_login_first"));
                this.$store.dispatch("changeModalStatus", {visible: true});
            } else {
                this.$router.push({
                    name: "ContestDetails",
                    params: {contestID: cid},
                });
            }
        },
        goContestList(type) {
            this.$router.push({
                name: "ContestList",
                query: {
                    type,
                },
            });
        },
        goProblem(event) {
            this.$router.push({
                name: "ProblemDetails",
                params: {
                    problemID: event.row.problemId,
                },
            });
        },
        goUserHome(username, uid) {
            this.$router.push({
                path: "/user-home",
                query: {uid, username},
            });
        },
        getDuration(startTime, endTime) {
            return time.formatSpecificDuration(startTime, endTime);
        },
        getRankTagClass(rowIndex) {
            return "rank-tag no" + (rowIndex + 1);
        },


    },
    computed: {
        ...mapState(["websiteConfig"]),
        ...mapGetters(["isAuthenticated"]),
    },
};
</script>

<style scoped>

/deep/ .el-card__header {
    padding: 0.6rem 1.25rem !important;
}

.card-top {
    /*margin-top: 20px;*/
    margin-top: 6rem;

}

.hc-h1 {
    margin-left: auto;
    margin-right: auto;
    border-radius: 11px;
    width: 70%;
    height: 80px;
    text-align: center;
    line-height: 80px;
    background: linear-gradient(-45deg, rgb(255, 245, 102), rgb(168, 266, 202), rgb(255, 173, 97), rgb(255, 133, 122), rgb(255, 255, 255), rgb(255, 92, 201), rgb(98, 121, 234), rgb(102, 255, 230)) 0% 0% / 300%;
}

.contest-card-running {
    border-color: rgb(25, 190, 107);
}

.contest-card-schedule {
    border-color: #f90;
}

.home-contest {
    text-align: left;
    font-size: 21px;
    font-weight: 500;
    line-height: 30px;
}

.oj-logo {
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    margin-bottom: 1rem;
    padding: 0.5rem 1rem;
    background: rgb(255, 255, 255);
    min-height: 47px;
}

.oj-normal {
    border-color: #409eff;
}

.oj-error {
    border-color: #e65c47;
}

.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.35;
    line-height: 200px;
    margin: 0;
}

.el-carousel__container {
    height: 339px;
}

.contest-card {
    margin-bottom: 20px;
}

.contest-title {
    font-size: 1.15rem;
    font-weight: 600;
}

.contest-type-auth {
    text-align: center;
    margin-top: -10px;
    margin-bottom: 5px;
}

ul,
li {
    padding: 0;
    margin: 0;
    list-style: none;
}

.contest-info {
    text-align: center;
}

.contest-info li {
    display: inline-block;
    padding-right: 10px;
}

/deep/ .contest-card-running .el-card__header {
    border-color: rgb(25, 190, 107);
    background-color: rgba(94, 185, 94, 0.15);
}

.contest-card-running .contest-title {
    color: #5eb95e;
}

/deep/ .contest-card-schedule .el-card__header {
    border-color: #f90;
    background-color: rgba(243, 123, 29, 0.15);
}

.contest-card-schedule .contest-title {
    color: #f37b1d;
}

.content-center {
    text-align: center;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both;
}

.welcome-title {
    font-weight: 600;
    font-size: 25px;
    font-family: "Raleway";
}

.contest-status {
    float: right;
}

.img-carousel {
//height: 490px; height: 365px;
}

@media screen and (max-width: 768px) {
    .contest-status {
        text-align: center;
        float: none;
        margin-top: 5px;
    }

    .contest-header {
        text-align: center;
    }

    .img-carousel {
        height: 220px;
        overflow: hidden;
    }

    .phone-margin {
        margin-top: 20px;
    }
}

.title .el-link {
    font-size: 21px;
    font-weight: 500;
    color: #444;
}

.clearfix h2 {
    color: #409eff;
}

.el-link.el-link--default:hover {
    color: #409eff;
    transition: all 0.28s ease;
}

.contest .content-info {
    padding: 0 70px 40px 70px;
}

.contest .contest-description {
    margin-top: 25px;
}

span.rank-tag.no1 {
    line-height: 24px;
    background: #bf2c24;
}

span.rank-tag.no2 {
    line-height: 24px;
    background: #e67225;
}

span.rank-tag.no3 {
    line-height: 24px;
    background: #e6bf25;
}

span.rank-tag {
    font: 16px/22px FZZCYSK;
    min-width: 14px;
    height: 22px;
    padding: 0 4px;
    text-align: center;
    color: #fff;
    background: #000;
    background: rgba(0, 0, 0, 0.6);
}

.user-avatar {
    margin-right: 5px !important;
    vertical-align: middle;
}

.cite {
    display: block;
    width: 14px;
    height: 0;
    margin: 0 auto;
    margin-top: -3px;
    border-right: 11px solid transparent;
    border-bottom: 0 none;
    border-left: 11px solid transparent;
}

.cite.no0 {
    border-top: 5px solid #bf2c24;
}

.cite.no1 {
    border-top: 5px solid #e67225;
}

.cite.no2 {
    border-top: 5px solid #e6bf25;
}

@media screen and (min-width: 1050px) {
    /deep/ .vxe-table--body-wrapper {
        overflow-x: hidden !important;
    }
}

.title {
    text-align: center;
    font-family: "Inter Tight", sans-serif;
//font-size: 65px; font-size: clamp(0.1rem, 7vw, 4.7rem); font-weight: 600;
    background: linear-gradient(
            to right,
            #1a7bebff 28%,
            #31e87af9 47%,
            #1a7bebff 80%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.main-container {
    overflow-y: scroll;
//height: 100vh; -ms-overflow-style: none; /* IE 和 Edge */ scrollbar-width: none; /* Firefox */
}

.main-container::-webkit-scrollbar {
    /* 隐藏滚动条,chrome*/
    display: none;
}

.s-text {
    text-align: center;
    font-size: medium;
    font-weight: bold
}

.d-text {
    height: 20%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.title-container {
    /* padding-top: 80px; */
    height: 40%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

/* ************ */

.hero {
    text-align: center;
}

.left-col {

    .subhead {
        text-transform: uppercase;
        font-weight: bold;
        color: gray;
        letter-spacing: .3em;
    }

    h1 {
        font-size: 2.5em;
        line-height: 1.3em;
        margin-top: .2em;
    }

    .primary-cta {
        background: #007AF3;
        color: white;
        text-decoration: none;
        padding: .6em 1.3em;
        font-size: 1.4em;
        border-radius: 5em;
        font-weight: bold;
        display: inline-block;
    }
}

.hero-img {
    width: 70%;
    margin-top: 3em;
    margin-left: 3rem;
}


/* ******************** */

@import url("https://fonts.googleapis.com/css?family=Pacifico");
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700");


h1::selection {
    color: white;
    background: #272727;
}

h1::-moz-selection {
    color: white;
    background: #272727;
}


.background {
    width: 100vw;
    height: 54vh;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
}

nav {
    width: 100vw;
    height: 100px;
    background: white;
    position: absolute;
    top: 0;
    animation: 2s fadeInNav ease;
}

@keyframes fadeInNav {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0;
        top: -25px;
    }
    100% {
        opacity: 1;
        top: 0;
    }
}


@keyframes fadeInCopyright {
    0% {
        opacity: 0;
    }
    80% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
    }
}


@keyframes fadeInLinks1 {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
    }
}


@keyframes fadeInLinks2 {
    0% {
        opacity: 0;
    }
    60% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
    }
}


@keyframes fadeInLinks3 {
    0% {
        opacity: 0;
    }
    70% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
    }
}

.header {
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.headerWrapper {
    text-align: center;
    position: relative;
    padding: 50px 88px 32px 120px;
}

.headerWrapper h6 {
    animation: 1s fadeIn ease;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.headerWrapper h1 {
    animation: 1.5s fadeInTitle ease;
}

@keyframes fadeInTitle {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.circle {
    border-radius: 50%;
    width: 100px;
    height: 100px;
}

.circle.blue {
    background: linear-gradient(#4f3dd5, #3db2d5);
    position: absolute;
    top: 6rem;
    left: 3rem;
    animation: circleBlueMove 2s ease;
    box-shadow: 3px 3px 15px rgba(61, 178, 213, 0.4);
}

@keyframes circleBlueMove {
    0% {
        opacity: 0;
        transform: translate(200px, 75px) rotate(90deg);
    }
    100% {
        opacity: 1;
    }
}

.circle.orange {
    background: linear-gradient(#d53d3d, #d5b83d);
    position: absolute;
    bottom: 0px;
    right: -8rem;
    animation: circleOrangeMove 2s ease;
    box-shadow: 3px 3px 15px rgba(213, 184, 61, 0.4);
}

@keyframes circleOrangeMove {
    0% {
        opacity: 0;
        transform: translate(-200px, -75px) rotate(90deg);
    }
    35% {
        opacity: 0;
        transform: translate(-200px, -75px) rotate(90deg);
    }
    100% {
        opacity: 1;
    }
}

.square {
    width: 100px;
    height: 100px;
}

.square.red {
    background: linear-gradient(135deg, #d53d3d, #d53dc9);
    position: absolute;
    top: 6rem;
    right: 4rem;
    animation: squareRedMove 2s ease;
    box-shadow: 3px 3px 15px rgba(213, 61, 201, 0.4);
    transform: rotate(45deg);
}

@keyframes squareRedMove {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 0;
        transform: translate(-200px, 75px) rotate(90deg);
    }
    100% {
        opacity: 1;
    }
}

.triangle {
        width: 100px;
        height: 100px;
    background: linear-gradient(45deg, #4dd1cf, #6ce194 50%, transparent 50%, transparent 100%);
}

.triangle.green{
    width: 3rem;
    height: 3rem;
    position: absolute;
    bottom: -2rem;
    left: -5rem;
    transform: rotate(188deg);
    box-shadow: -11px 11px 15px rgba(61, 213, 64, 0.4);
    animation: triangleGreendMove 2s ease;
}

@keyframes triangleGreendMove {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0;
        transform: translate(200px, -75px) rotate(90deg);
    }
    100% {
        opacity: 1;
    }
}

/* Services */

.services .grid .card h3 {
    color: white;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 5px;
}

.services .grid .card p {
    color: #c3c3c3;
    font-size: 22px;
    font-weight: normal;
}

.square.blue {
    position: absolute;
    box-shadow: 3px 3px 15px rgba(61, 178, 213, 0.4);
    background: linear-gradient(#4f3dd5, #3db2d5);
    top: 100px;
    right: 75px;
    width: 125px;
    height: 125px;
    opacity: 0.01;
    transition: all 0.05s ease;
    transform: translateX(125px);
}

/* Responsive */


@media (max-width: 850px) {


    h6 {
        font-size: 22px;
    }

    h2 {
        font-size: 48px;
    }

    .services .square.blue {
        width: 75px;
        height: 75px;
    }


    .services .grid .card h3 {
        color: white;
        font-size: 22px;
        font-weight: 700;
        margin-bottom: 5px;
    }

    .services .grid .card p {
        color: #c3c3c3;
        font-size: 20px;
        font-weight: normal;
    }
}

@media (max-width: 850px) and (min-width: 440px) {
    .headerWrapper {
        position: static;
        padding: 0;
    }

    .overlay a {
        color: white;
        font-size: 36px;
        font-weight: bold;
        text-decoration: none;
        display: block;
        margin-left: 40px;
        margin-bottom: 10px;
        opacity: 0;
        transition: transform 0.2s ease;
        overflow: hidden;
    }

    .overlay p {
        margin-left: 40px;
    }

    h6 {
        font-size: 22px;
    }

    .headerWrapper h1 {
        color: #272727;
        font-size: 56px;
        font-weight: 700;
        animation: 1.5s fadeInTitle ease;
    }

    .circle {
        border-radius: 50%;
        width: 75px;
        height: 75px;
    }

    .circle.blue {
        background: linear-gradient(#4f3dd5, #3db2d5);
        position: absolute;
        top: 129px;
        left: 50px;
        animation: circleBlueMove 2s ease;
        box-shadow: 3px 3px 15px rgba(61, 178, 213, 0.4);
    }

    @keyframes circleBlueMove {
        0% {
            opacity: 0;
            transform: translate(200px, 75px) rotate(90deg);
        }
        100% {
            opacity: 1;
        }
    }

    .circle.orange {
        background: linear-gradient(#d53d3d, #d5b83d);
        position: absolute;
        top: 520px;
        right: 50px;
        animation: circleOrangeMove 2s ease;
        box-shadow: 3px 3px 15px rgba(213, 184, 61, 0.4);
    }

    @keyframes circleOrangeMove {
        0% {
            opacity: 0;
            transform: translate(-200px, -75px) rotate(90deg);
        }
        35% {
            opacity: 0;
            transform: translate(-200px, -75px) rotate(90deg);
        }
        100% {
            opacity: 1;
        }
    }

    .square {
        width: 75px;
        height: 75px;
    }

    .square.red {
        background: linear-gradient(135deg, #d53d3d, #d53dc9);
        position: absolute;
        top: 4rem;
        right: 6rem;
        animation: squareRedMove 2s ease;
        box-shadow: 3px 3px 15px rgba(213, 61, 201, 0.4);
        transform: rotate(45deg);
    }

    @keyframes squareRedMove {
        0% {
            opacity: 0;
        }
        20% {
            opacity: 0;
            transform: translate(-200px, 75px) rotate(90deg);
        }
        100% {
            opacity: 1;
        }
    }


    @keyframes triangleGreendMove {
        0% {
            opacity: 0;
        }
        50% {
            opacity: 0;
            transform: translate(200px, -75px) rotate(90deg);
        }
        100% {
            opacity: 1;
        }
    }
}

@media (max-width: 440px) {
    .background {
        max-height: 700px;
    }

    .headerWrapper {
        position: static;
        padding: 0;
    }

    .overlay a {
        color: white;
        font-size: 36px;
        font-weight: bold;
        text-decoration: none;
        display: block;
        margin-left: 40px;
        margin-bottom: 10px;
        opacity: 0;
        transition: transform 0.2s ease;
        overflow: hidden;
    }

    .overlay p {
        margin-left: 40px;
        position: static;
        margin-top: 40px;
    }

    .headerWrapper h6 {
        color: #d6d6d6;
        font-size: 22px;
        font-weight: 600;
        text-transform: uppercase;
        animation: 1s fadeIn ease;
    }

    .headerWrapper h1 {
        color: #272727;
        font-size: 48px;
        font-weight: 700;
        animation: 1.5s fadeInTitle ease;
    }

    .circle {
        border-radius: 50%;
        width: 75px;
        height: 75px;
    }

    .circle.blue {
        background: linear-gradient(#4f3dd5, #3db2d5);
        position: absolute;
        top: 0px;
        left: 4rem;
        animation: circleBlueMove 2s ease;
        box-shadow: 3px 3px 15px rgba(61, 178, 213, 0.4);
    }

    @keyframes circleBlueMove {
        0% {
            opacity: 0;
            transform: translate(100px, 75px) rotate(90deg);
        }
        100% {
            opacity: 1;
        }
    }

    .circle.orange {
        background: linear-gradient(#d53d3d, #d5b83d);
        position: absolute;
        top: 480px;
        right: 25px;
        animation: circleOrangeMove 2s ease;
        box-shadow: 3px 3px 15px rgba(213, 184, 61, 0.4);
    }

    @keyframes circleOrangeMove {
        0% {
            opacity: 0;
        }
        35% {
            opacity: 0;
            transform: translate(-100px, -75px) rotate(90deg);
        }
        100% {
            opacity: 1;
        }
    }

    .square {
        width: 75px;
        height: 75px;
    }

    .square.red {
        background: linear-gradient(135deg, #d53d3d, #d53dc9);
        position: absolute;
        top: 170px;
        right: 25px;
        animation: squareRedMove 2s ease;
        box-shadow: 3px 3px 15px rgba(213, 61, 201, 0.4);
        transform: rotate(45deg);
    }

    @keyframes squareRedMove {
        0% {
            opacity: 0;
        }
        20% {
            opacity: 0;
            transform: translate(-100px, 75px) rotate(90deg);
        }
        100% {
            opacity: 1;
        }
    }

    @keyframes triangleGreendMove {
        0% {
            opacity: 0;
        }
        50% {
            opacity: 0;
            transform: translate(100px, -75px) rotate(90deg);
        }
        100% {
            opacity: 1;
        }
    }

    .square.blue {
        top: 30px;
        right: 10px;
        transform: translateX(60px);
    }

    .square.blue.in-view {
        transform: rotate(22.5deg) translateX(0px);
    }
}
</style>
